<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>jquery+css3立体百叶窗切换 - 站长素材</title>
<link rel="stylesheet" href="css/normalize.css" type="text/css" />
<link rel="stylesheet" href="css/jquery.wiper.css" type="text/css" />
<link rel="stylesheet" href="css/zzsc.css" type="text/css" />
<script src="js/jquery.min.js"></script>
<script src="js/jquery.wiper.js"></script>
<script>
//---------------wiper------------------
$(function() {
	$("ul#acordion_main").Wiper();

	//easing: 'linear',
	//easing: 'ease',
	//easing: 'ease-in',
	//easing: 'ease-out',
	//easing: 'ease-in-out',

	//Demonstration1
	$("ul#inner_wiper").Wiper({
		easing: 'ease-out',
		offset: -1,
		duration: 2000,
		binder: $("#inner_wiper_demo"),
		menuColors: [ '#000000', '#333333', '#666666', '#999999', '#cccccc' ]
	});

	//Demonstration2
	$("ul#inner_wiper2").Wiper({
		easing: 'ease-out',
		offset: -1,
		duration: 800,
		binder: $("#inner_wiper_demo2"),
		menuColors: [ false, false, '#ffd700', '#adff2f', '#4169e1' ],
	});
});

</script>
<script>
$(function() {
      $("footer #translation_box .ja").click(function() {
        $(".ja_box").css("display", "block");
        $(".en_box").css("display", "none");
      });

      $("footer #translation_box .en").click(function() {
        $(".ja_box").css("display", "none");
        $(".en_box").css("display", "block");
      });
	});
	</script>
</head>
<body>
<article id="test">
  <section id="acordion_box">
  <ul id="acordion_main">
    <li>
    <h2>Demo 1</h2>
    <section class="sample_text">Demonstration 1</section>
    <section id="inner_wiper_demo">
    <ul id="inner_wiper">
      <li>
        <h2>Sample</h2>
        <section class="li_sample5 en_box">We will work together to create the site in your desired.</section>
      </li>
      <li>
        <h2>Sample</h2>
        <section class="li_sample4 en_box">In addition to the wonderful site in your sense.</section>
      </li>
      <li>
        <h2>Sample</h2>
        <section class="li_sample3 en_box">will direct it artistic and dynamic web sites for you.</section>
      </li>
      <li>
        <h2>Sample</h2>
        <section class="li_sample2 en_box">This is a demo using<br>
          the background-image.</section>
      </li>
      <li>
        <h2>Sample</h2>
        <section class="li_sample1" class="en_box">
        Wiper-Sample
      </section>
      </li>
    </ul>
    </section>
    </li>
    <li>
      <h2>Demo 2</h2>
      <section class="sample_text">Demonstration 2</section>
      <section id="inner_wiper_demo2">
        <ul id="inner_wiper2">
          <li>
            <h2></h2>
            <section class="color">
              <section class="color_text">M&amp;Co.</section>
              <section id="demo_logo"> <img src="images/demo_logo.png"></section>
            </section>
          </li>
          <li>
            <h2></h2>
            <section class="color">
              <section class="color_text">Red</section>
            </section>
          </li>
          <li>
            <h2></h2>
            <section class="color">
              <section class="color_text">Gold</section>
            </section>
          </li>
          <li>
            <h2></h2>
            <section class="color">
              <section class="color_text">Greenyellow</section>
            </section>
          </li>
          <li>
            <h2></h2>
            <section class="color">
              <section class="color_text">Royalblue</section>
            </section>
          </li>
          <li>
            <h2>Filter gallery</h2>
            <section class="color">
              <section class="color_text">Blueviolet</section>
            </section>
          </li>
        </ul>
      </section>
    </li>
  </ul>
  </section>
</article>
<div style="text-align:center;clear:both">
<p>适用浏览器：360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗. 不支持IE8及以下浏览器。</p>
<p>来源：<a href="http://sc.chinaz.com/" target="_blank">站长素材</a></p>
</div>
</body>
</html>